<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script src="../../lib/utils.js"></script>
<script src="arrow.js"></script>
<script type="text/javascript">
    window.onload=function(){
        var canvas=document.getElementById("canvas"),
                ctx=canvas.getContext("2d"),
                mouse=utils.captureMouse(canvas),
                arrow=new Arrow();
        arrow.x=canvas.width/2;
        arrow.y=canvas.height/2;

        (function drawFrame(){
            window.requestAnimationFrame(drawFrame,canvas);
            ctx.clearRect(0,0,canvas.width,canvas.height);

            var dx=mouse.x-arrow.x,
                    dy=mouse.y=arrow.y;
            arrow.rotate=Math.atan2(dy,dx);
            console.log(arrow.rotate);
            arrow.draw(ctx);
        }());
    }
</script>
</body>
</html>